
<template>
  <view class="right-wrapper" @touchmove.stop.prevent="moveStop" :style="viewColor">
    <view class="control-wrapper animated" :class="showBox ? 'slideInRight' : ''">
      <view class="content-box">
        <view class="title">店铺类型</view>
        <view class="brand-wrapper">
          <scroll-view style="max-height: 400rpx;" :scroll-y="isShow">
            <view class="wrapper">
              <view class="item line1" v-for="(item, index) in list" :key="index" :class="item.check ? 'on' : ''"
                @tap="bindChenck1(item)">
                {{ item.type_name }}
              </view>
            </view>
          </scroll-view>
          <view class="btns" v-if="!isShow && list.length > 9" @click="isShow = true">展开全部<text
              class="iconfont icon-xiangxia"></text></view>
          <view class="btns" v-if="isShow && list.length > 9" @click="isShow = false">收起<text
              class="iconfont icon-xiangshang"></text></view>
        </view>
        <view class="title">商户分类</view>
        <view class="brand-wrapper">
          <scroll-view style="max-height: 400rpx;" :scroll-y="isShow">
            <view class="wrapper">
              <view class="item line1" v-for="(item, index) in merCate" :key="index" :class="item.check ? 'on' : ''"
                @tap="bindChenck2(item)">
                {{ item.category_name }}
              </view>
            </view>
          </scroll-view>
          <view class="btns" v-if="!isShow && merCate.length > 9" @click="isShow = true">展开全部<text
              class="iconfont icon-xiangxia"></text></view>
        </view>
        <view class="foot-btn">
          <view class="btn-item" @click="reset">重置</view>
          <view class="btn-item confirm" @click="confirm">确定</view>
        </view>
      </view>
    </view>
    <view class="right-bg" @click="close"></view>
  </view>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
// import { mapGetters } from "vuex";
export default {
  props: {
    storeTypeArr: { //店铺类型
      type: Array,
    },
    merList: { //商户分类
      type: Array,
    },
    status: {
      type: Boolean,
      default: false
    },
  },
  // computed: mapGetters(['viewColor']),
  data() {
    return {
      min: '',
      max: '',
      isShow: false,
      list: [],
      merCate: [],
      activeList: [],
      selectList: [],
      showBox: false,
      viewColor: '--view-theme: #E93323;--view-assist:#FF7612;--view-priceColor:#E93323;--view-bgColor:rgba(255, 118, 18,.1);--view-minorColor:rgba(233, 51, 35,.1);--view-bntColor11:#FDA923;--view-bntColor12:#FD6523;--view-bntColor21:#F11B09;--view-bntColor22:#F67A38;'
    }
  },
  mounted() {
    // 重要组件挂载后
    this.list = this.storeTypeArr //店铺类型
    this.merCate = this.merList //商户分类
    this.showBox = this.status
  },
  watch:{
  	status(){
  		console.log(1111111)
  	}
  },
  methods: {
    bindChenck1(item) {
      item.check = !item.check
      this.arrFilter1()
    },
    bindChenck2(item) {
      item.check = !item.check
      this.arrFilter2()
    },
    arrFilter1() {
      this.selectList = this.list.filter(item => {
        return item.check == true
      })
    },
    arrFilter2() {
      this.activeList = this.merCate.filter(item => {
        return item.check == true
      })

    },
    reset() {
      this.list.forEach((el, index) => {
        el.check = false
      })
      this.merCate.forEach((el, index) => {
        el.check = false
      })
      this.arrFilter1()
      this.arrFilter2()
    },
    confirm() {
      this.arrFilter1()
      this.arrFilter2()
      let obj = {
        storeTypeArr: this.selectList,
        merList: this.activeList,
        status: false
      }
      this.showBox = false
      this.$emit('confirm', obj)
    },
    close() {
      this.showBox = false
      this.$emit('close')
    },
    moveStop() { }
  }
}
</script>
<style lang="scss">
page {
  background-color: #f6f6f6;
}
</style>
<style lang="scss" scoped>
@import '@/styles/shop.scss';

.slideInRight {
  animation-duration: .5s
}

.right-wrapper {
  z-index: 999 !important;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  .control-wrapper {
    z-index: 999 !important;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    width: 635rpx;
    height: 100%;
    background-color: #F5F5F5;

    .header {
      padding: 50rpx 26rpx 40rpx;
      background-color: #fff;

      .title {
        font-size: 26rpx;
        font-weight: bold;
        color: #282828;
      }

      .input-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 28rpx;

        input {
          width: 260rpx;
          height: 56rpx;
          padding: 0 10rpx;
          background: rgba(242, 242, 242, 1);
          border-radius: 28rpx;
          font-size: 22rpx;
          text-align: center;
        }

        .line {
          width: 15rpx;
          height: 2rpx;
          background: #7D7D7D;
        }
      }
    }

    .content-box {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-top: 20rpx;
      padding: 0 26rpx;
      background-color: #fff;
      overflow: hidden;

      .title {
        padding: 40rpx 0 20rpx;
        font-size: 26rpx;
        font-weight: bold;
        color: #282828;
      }

      .brand-wrapper {
        // flex: 1;
        overflow: hidden;

        .wrapper {
          display: flex;
          flex-wrap: wrap;
          padding-bottom: 20rpx;
        }

        .item {
          display: block;
          width: 186rpx;
          height: 56rpx;
          line-height: 56rpx;
          text-align: center;
          background: rgba(242, 242, 242, 1);
          border-radius: 28rpx;
          margin-top: 25rpx;
          padding: 0 10rpx;
          margin-right: 12rpx;

          &:nth-child(3n) {
            margin-right: 0;
          }

          &.on {
            background: var(--view-minorColor);
            border: 1px solid var(--view-theme);
            color: var(--view-theme);
          }
        }

        .btns {
          display: flex;
          align-items: center;
          justify-content: center;
          padding-top: 10rpx;
          font-size: 22rpx;
          color: #999;

          .iconfont {
            margin-left: 10rpx;
            margin-top: 5rpx;
            font-size: 20rpx;
          }
        }
      }

      .foot-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        // width: 100%;
        // text-align: center;
        bottom: 30rpx;

        .btn-item {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 286rpx;
          height: 68rpx;
          background: rgba(255, 255, 255, 1);
          border: 1px solid rgba(170, 170, 170, 1);
          border-radius: 34rpx;
          font-size: 26rpx;
          color: #282828;

          &.confirm {
            background: var(--view-theme);
            border-color: var(--view-theme);
            color: #fff;
            margin-left: 20rpx;
          }
        }
      }
    }
  }

  .right-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
  }
}
</style>
